<template>
  <el-descriptions :column="1">
    <template v-for="item in formLabels">
      <el-descriptions-item>
        <template #label>
          <div class="custom-label">{{ item.label }}：</div>
        </template>
        <template v-if="item.field === 'gender'">
          {{ getEnumLabel(item.field) }}
        </template>
        <template v-else>
          {{ storeUser[item.field] }}
        </template>
      </el-descriptions-item>
    </template>
    <el-descriptions-item>
      <div style="padding-left: 136px;">
        <slot></slot>
      </div>
    </el-descriptions-item>
  </el-descriptions>
</template>

<script setup>
import { computed, reactive } from 'vue';
import { useStore } from 'vuex';

const store = useStore();
const emit = defineEmits(['emit-status']);

const storeUser = computed(() => store.getters['user/getUser']);
const formLabels = reactive([
  { field: 'id', label: 'ID', labelType: 'text', disabled: true },
  { field: 'username', label: '用户名', labelType: 'text', disabled: true },
  { field: 'fullname', label: '姓名', labelType: 'text' },
  { field: 'gender', label: '性别', labelType: 'radio' },
  { field: 'age', label: '年龄', labelType: 'inputNumber', min: 0, max: 122 },
  // { field: 'avatar', label: '头像', labelType: 'upload' },
]);

function getEnumLabel(field) {
  const value = storeUser.value[field];
  const enumDef = store.getters['enums/getEnums'](field);
  return enumDef.getLabel(value)
}
</script>

<style scoped>
.custom-label {
  width: 120px;
  text-align: right;
}

:deep(.el-descriptions__cell) {
  display: flex;
}

/* :deep(tr:last-child .el-descriptions__cell) {
  display: flex;
  padding-left: 120px;
} */
</style>